<template>
  <view class="top-info">
    <view class="step">
      {{ title }}
    </view>
    <view class="step-text">
      {{ desc }}
    </view>
  </view>
</template>

<script lang="ts" setup>
// #region Props
defineProps<{ title: string, desc: string }>()
// #endregion
// #region Emits
// #endregion
// #region Hooks
// #endregion
// #region Computed
// #endregion
// #region Watch
// #endregion
// #region Event
// #endregion
// #region Function
// #endregion
// #region Life Cycle
// #endregion
// #region Expose
// #endregion
</script>

<style lang="scss" scoped>
.top-info {
  display: flex;
  flex-direction: column;
  .step {
    font-size: 30px;
    color: var(--main-color);
    font-weight: bold;
    margin-bottom: 10px;
  }
  .step-text {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.5);
  }
}
</style>
